import React, { Component, createRef } from 'react'
import { Link } from 'react-router-dom'
import './App.css'
import RouterView from './router/route.view'
import RoutesConfig from './router/route.config'
class TodoItem extends Component {
  render() {
    return (
      <div>
        <span>
          {
            this.props.data.status === 0 ? '进行中' : (this.props.data.status === 1 ? '强行终止' : '已完成')
          }
        </span>
        <span>{this.props.data.text}</span>
        {
          this.props.data.status === 0 ?<span><button onClick={() => this.props.changeStatus(this.props.data.id, 1)}>强行终止</button><button  onClick={() => this.props.changeStatus(this.props.data.id, 2)}>已完成</button></span> : null
        }
      </div>
    )
  }
}
class Todo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      filterStatus: 0,
      filterText: ''
    }
    this.addIptRef = createRef()
  }
  addTodo() {
    // 添加任务的数据，任务的数据在state.list
    let arr = this.state.list
    arr.push({
      id: arr.length + 1,
      text: this.addIptRef.current.value,
      status: 0 // 0代表进行中，1代表强行终止，2代表已完成
    })
    this.setState({
      list: arr,
    }, () => {
      console.log('修改后的数据', this.state)
      this.addIptRef.current.value = ""
    })
  }
  changeStatus(id, status) {
    // 修改某个任务的状态
    let list = this.state.list
    for(let i = 0; i< list.length; i++) {
      if(id === list[i].id) {
        list[i].status = status
        break
      }
    }
    this.setState({
      list
    })
  }
  render() {
    console.log('todo', this.props)

    return(
      <div>
        <div>
          <button className={this.state.filterStatus === -1 ? 'active' : ''} onClick={ () => this.setState({
            filterStatus: -1
          })}>全部任务</button>
          <button  className={this.state.filterStatus === 0 ? 'active' : ''} onClick={ () => this.setState({
            filterStatus: 0
          })}>进行中的任务</button>
          <button className={this.state.filterStatus === 1 ? 'active' : ''} onClick={ () => this.setState({
            filterStatus: 1
          })}>强行终止的任务</button>
          <button className={this.state.filterStatus === 2 ? 'active' : ''} onClick={ () => this.setState({
            filterStatus: 2
          })}>已完成的任务</button>
        </div>
        <div>
          <input value={this.state.filterText} onChange={e => this.setState({
            filterText: e.target.value
          })}></input>
        </div>
        <div>
          <input ref={this.addIptRef}></input>
          <button onClick={() => this.addTodo()}>添加</button>
        </div>
        <div>
          {
            this.state.list.filter(item => {
              if(this.state.filterStatus === -1) {
                // 搜索全部的任务
                if(this.state.filterText) { // 有值
                  return item.text.includes(this.state.filterText)
                } else{
                  return true
                }
              } else {
                // 搜索某种状态的任务
                return item.status === this.state.filterStatus && item.text.includes(this.state.filterText)
              }
            }).map((item, key) => <TodoItem key={key} data={item} changeStatus={(id, status) => this.changeStatus(id, status)}></TodoItem>)
          }
        </div>
      </div>
    )
  }
}




class App extends Component {
  constructor(props) {
    super(props)
    console.log(123, this.props)
  }
  render() {
    console.log('props', this.props)
    return(
      <div>
        <RouterView routes={RoutesConfig}></RouterView>
        {/* <Switch>
          <Route path="/index" component={Index}></Route>
          <Route path="/idea" component={Idea}></Route>
          <Route path="/college" component={College}></Route>
          <Redirect from="/" to="/index"></Redirect>
        </Switch> */}
        {/* <div className="nav">
          <Link to="/index">首页</Link>
          <Link to="/idea">想法</Link>
          <Link to="/college">大学</Link>
        </div> */}
      </div>
    )
  }
}
export default App;
